<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/style.css" media="screen" />
<title>location-shop</title>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=th"></script>
<script type="text/javascript" src="/scripts/common.js"></script>
<script type="text/javascript">
$(function(){
	var initLatlng = new google.maps.LatLng(15.500000,100.820000);
	var options = {
		zoom: 7,
		center: initLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	
	}
	var map = new google.maps.Map(document.getElementById("traffic-map"), options);

	$.getJSON('/location-shop/result.json', function(data) {
		$.each(data,function(key,val) {
			addMarker(map,val.lat,val.lng,val.title,val.address,val.thumb,val.telephone);
		});
	});
	var trafficLayer = new google.maps.TrafficLayer();
	trafficLayer.setMap(map); 
});

function addMarker(map,lat,lng,title,address,img,telephone) {
	var initLatlng = new google.maps.LatLng(lat,lng);
	var marker = new google.maps.Marker({
		position: initLatlng ,
		animation: google.maps.Animation.DROP,
		title:title
	});
	marker.setMap(map); 
	
	var infowindow = new google.maps.InfoWindow({
		content:  '<div class="google-description"><h3>'+title+'</h3><div class="address">'+address+' <p class="telephone">Telephone : '+telephone+'</p></div><div class="pic"><img src="../../contents/location/'+img+'" width="150" /></div></div>',
		size: new google.maps.Size(50,50)
	});
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
}
</script>
<style type="text/css">
.google-description {
	color:#000;
	width:350px;
	text-align:left;
}
.google-description div.address {
	width:165px;
	display:block;
	float:left;
	font-size:12px;
	margin:5px;
}
.google-description p.telephone {
	font-size:10px;
	font-stretch:inherit;
}
.google-description div.pic {
	display:block;
	float:right;
}
#locationshop .container {
	width: 900px;
	height: 600px;
	text-align:center;
	color:#F00;
	background:#000;
	margin:0 auto;
}
#locationshop h1 {
	font-size:24px;
	font-weight:200;
}
#traffic-map {
	background:#000;
	width: 850px;
	height: 550px;
	margin:10px auto;
}
</style>
</head>
<body id="locationshop">
<!--$header_html-->
<div class="wrapper content-1">
  <div  class="container">
    <h1>MAP</h1>
    <div id="traffic-map"> </div>
  </div>
</div>

<!--$footer_html-->
</body>
</html>